<template>
	<view class="app app-bg">
		<view class="item">
			<text class="label">账号类型</text>
			<u-radio-group v-model="type" active-color="#00C876" @change="radioChange">
				<u-radio :name="0">支付宝</u-radio>
				<u-radio :name="1">银行卡</u-radio>
				<u-radio :name="2">微信</u-radio>
			</u-radio-group>
		</view>
		<block v-if="type === 0">
			<view class="item">
				<text class="label">账号信息</text>
				<u-input
					placeholder="请输入支付宝账号信息"
					v-model="alipay.account"
					type="text"
				/>
			</view>
			<view class="item">
				<text class="label">收款人姓名</text>
				<u-input v-model="alipay.name" type="text" placeholder="请输入收款人姓名" />
			</view>
			<view class="item">
				<text class="label">联系方式</text>
				<u-input v-model="alipay.mobile" type="text" placeholder="请输入联系方式" />
			</view>
		</block>
		<block v-else-if="type === 2">
			<view class="item">
				<text class="label">账号信息</text>
				<u-input placeholder="请输入微信账号信息" v-model="alipay.account" type="text" />
			</view>
			<view class="item">
				<text class="label">收款人姓名</text>
				<u-input v-model="alipay.name" type="text" placeholder="请输入收款人姓名" />
			</view>
			<view class="item">
				<text class="label">联系方式</text>
				<u-input v-model="alipay.mobile" type="text" placeholder="请输入联系方式" />
			</view>
		</block>
		<block v-else>
			<view class="item">
				<text class="label">银行卡号</text>
				<u-input v-model="card.number" type="text" placeholder="请输入银行卡号" />
			</view>
			<view class="item">
				<text class="label">收款人姓名</text>
				<u-input v-model="card.name" type="text" placeholder="请输入收款人姓名" />
			</view>
			<view class="item">
				<text class="label">开户行</text>
				<u-input v-model="card.bank" type="text" placeholder="请输入银行开户行" />
			</view>
			<view class="item">
				<text class="label">联系方式</text>
				<u-input v-model="card.mobile" type="text" placeholder="请输入联系方式" />
			</view>
		</block>
		<view class="btn" @tap="send">确定</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			aid: "",
			type: 0,
			alipay: { account: "", name: "", mobile: "" },
			card: { number: "", name: "", bank: "", mobile: "" }
		}
	},
	onLoad() {
		const eventChannel = this.getOpenerEventChannel()
		if (eventChannel.on) {
			eventChannel.on("data", data => {
				this.type = data.type
				if (data.type === 0) {
					let { account, name, mobile } = data
					this.alipay = { account, name, mobile }
				} else {
					let { number, name, bank, mobile } = data
					this.card = { number, name, bank, mobile }
				}
			})
		}
	},
	methods: {
		// 切换
		radioChange() {
			this.alipay = { account: "", name: "", mobile: "" }
			this.card = { number: "", name: "", bank: "", mobile: "" }
		},
		// 确定
		send() {
			let info = {}
			const { type, aid } = this
			if (type === 0) {
				const { account, name, mobile } = this.alipay
				if (!account) return vk.toast("请输入支付宝账号信息")
				if (!mobile) return vk.toast("请输入联系方式")
				if (!name) return vk.toast("请输入收款人姓名")
				info = { account, name, mobile }
			} else if (type === 2) {
				const { account, name, mobile } = this.alipay
				if (!account) return vk.toast("请输入微信账号信息")
				if (!mobile) return vk.toast("请输入联系方式")
				if (!name) return vk.toast("请输入收款人姓名")
				info = { account, name, mobile }
			} else {
				const { number, name, bank, mobile } = this.card
				if (!number) return vk.toast("请输入银行卡号")
				if (!mobile) return vk.toast("请输入联系方式")
				if (!name) return vk.toast("请输入收款人姓名")
				if (!bank) return vk.toast("请输入银行开户行")
				info = { number, name, bank, mobile }
			}

			vk.callFunction({
				url: "shifu/user.updateShifuAccount",
				title: "提交中...",
				data: { type, info, aid }
			}).then(() => {
				vk.toast("编辑成功", "none", 1000, () => {
					vk.navigateBack()
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.item {
	display: flex;
	align-items: center;
	height: 110rpx;
	background-color: #ffffff;
	border-top: 1rpx solid #f5f5f5;
	padding: 0 20rpx;
	.label {
		display: block;
		font-weight: bold;
		width: 178rpx;
	}
	/deep/ .u-radio__label {
		font-size: 26rpx !important;
	}
}

.btn {
	height: 80rpx;
	border-radius: 44rpx;
	background-color: #3ab54a;
	color: #fff;
	margin: 220rpx 28rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
